<template>
  <div class="post">
    <Header></Header>
    <div class="content">
      <div class="content_wrapper">
        <div class="featuredmedia">
          <img :src="posts['_embedded'] && posts['_embedded']['wp:featuredmedia'] && posts['_embedded']['wp:featuredmedia'][0].source_url">
        </div>
        <h1>{{ posts.title.rendered }}</h1>
        <div v-html="posts.content.rendered"></div>
      </div>
    </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Header from '@/components/header/index.vue'
import request from './../request'

@Component({
  components: { Header }
})
export default class Post extends Vue {
  id: number
  posts: object = {
    title: {
      rendered: ''
    },
    content: {
      rendered: ''
    }
  }

  created() {
    this.id = +this.$route.params.id
    request.getPost({ id: this.id }).then(responsePost => {
      this.posts = responsePost.data
    })
  }
}
</script>

<style lang="scss" scoped>
.content {
  .content_wrapper {
    width: 900px;
    margin: 20px auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 4px;

    .featuredmedia {
      img {
        width: 100%;
      }
    }
  }
}
</style>
